<template>
    <div>
        <table class="add_bank_card_page">
            <tr>
                <td>
                    <span>修改密码</span>
                </td>
                <td align="right">
                    <span>返回</span>
                </td>
            </tr>
        </table>
        <hr style="height:0px; border-top:1px ridge rgb(233, 233, 233)">
        <nt-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="add_bank_card_form">
            <nt-form-item label="当前密码：" prop="current_pass">
                <nt-input v-model="ruleForm.current_pass" placeholder="请输入当前密码" :maxlength="40" />
            </nt-form-item>
            <nt-form-item label="新密码：" prop="new_pass">
                <nt-input v-model="ruleForm.new_pass" placeholder="请输入新密码" :maxlength="40" />
                <span>必须为6-20个英文字母，数字或符号，不能为纯数字。</span>
            </nt-form-item>
            <nt-form-item label="确认新密码：" prop="confirm_pass">
                <nt-input v-model="ruleForm.confirm_pass" placeholder="请输入确认密码" :maxlength="40" />
            </nt-form-item>
        </nt-form>
        <div align="center">
            <nt-button class="add_bank_card_next" type="success" :loading="loading" :disable="disable" @click="submitForm('ruleForm')">{{submit_text}}
            </nt-button>
        </div>
    </div>
</template>
<style scoped>
    .add_bank_card_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }

    .add_bank_card_form {
        width: 625px;
        margin: 20px auto;
    }

    .add_bank_card_next {
        width: 350px;
        margin-left: 150px;
    }

    .text_blue {
        cursor: pointer;
        color: rgb(59, 166, 211);
    }

    .text_gray {
        color: #8c939d;
    }
</style>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    current_pass: '',
                    new_pass: '',
                    confirm_pass: ''
                },
                rules: {
                    current_pass: [
                        { required: true, message: '请输入当前密码', trigger: 'blur' },
                    ],
                    new_pass: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                    ],
                    confirm_pass: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                    ]
                },
                loading: false,
                disable: false,
                submit_text: '提交',
            }
        },

        components: {

        },

        created: async function () {

        },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>